<template>
  <div id="container" style="width: 913px">
    <header>
      <div>
        <div @click="$router.push('newLogin')">
          <a href="#"><span>LO</span>V<span>O</span> | 商品管理平台</a>
        </div>
        <div>
          <a href="" @click="$router.push('newLogin')">退出登录</a>
          <a href="#">关于朗沃</a>
          <a href="">联系我们</a>
        </div>
        <a href="#" id="welcome" title=""></a>
      </div>
    </header>
    <article style="margin: auto">
      <div id="img">
        <div id="inImgDiv">
          <div>
            <p><span>管理</span>模块</p>
            <p>Management</p>
          </div>
          <div id="model">
            <div @click="openAddDialog">
              <p>商品上架管理</p>
            </div>
            <div @click="this.$router.push('statistics')">
              <p>查看销售情况</p>
            </div>
            <div @click="this.$router.push('returnOrderAudit')">
              <p>退货订单审核</p>
            </div>
          </div>
        </div>
      </div>
      <!--      <div id="bid">-->
      <!--        <p><span>招标</span> 专题</p>-->
      <!--        <p>bid topics</p>-->
      <!--        <div>-->
      <!--          <div>-->
      <!--            <div></div>-->
      <!--            <div>-->
      <!--              <p>发布招标</p>-->
      <!--              <p>Look at the tender</p>-->
      <!--              <span class="blueSpan"></span>-->
      <!--              <p>朗沃商城招标正在火热进行中！</p>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--          <div>-->
      <!--            <div></div>-->
      <!--            <div>-->
      <!--              <p>招标管理</p>-->
      <!--              <p>Management of the tender</p>-->
      <!--              <span class="blueSpan"></span>-->
      <!--              <p>查看管理我的投标</p>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
    </article>
    <footer>
    </footer>
    <el-dialog v-model="addDialog" title="添加上架商品" width="100%">
      <div>
        <div>
          <el-row style="align-items: center;font-size: 16px;">
            <el-col :span="1"></el-col>
            <el-col :span="3">
              <p>商品类型:</p>
            </el-col>
            <el-col :span="6">
              <el-input v-model="type" clearable style="width: 170px"/>
            </el-col>
            <el-col :span="3">
              <p style="margin-left: 10px">商品名:</p>
            </el-col>
            <el-col :span="6">
              <el-input v-model="name" clearable style="width: 170px"/>
            </el-col>
            <el-col :span="4">
              <el-button icon="Search" @click="findAll"/>
            </el-col>
          </el-row>
        </div>
        <el-table :data="inventoryList" height="350" stripe style="width: 100%;">
          <el-table-column prop="goodsNo" label="商品编号" width="100"/>
          <el-table-column prop="goodsName" label="商品名" width="120"/>
          <el-table-column prop="goodsSize" label="商品规格" width="150"/>
          <el-table-column prop="num" label="库存数量" width="120"/>
          <el-table-column prop="type" label="类别编号" width="120"/>
          <el-table-column prop="goodsType" label="类别名" width="120"/>
          <el-table-column prop="buyPrice" label="进价(元)" width="90">
            <template #default="n">
              {{ n.row.buyPrice }}元
            </template>
          </el-table-column>
          <el-table-column prop="status" label="上下架状态" width="100">
            <template #default="n">
              {{ this.readStatus(n.row.status) }}
            </template>
          </el-table-column>
          <el-table-column prop="discount" label="折扣" width="120"/>
          <el-table-column prop="preSaleStatus" label="预售状态" width="120">
            <template #default="n">
              {{ n.row.preSaleStatus == 0 ? '非预售' : '预售' }}
            </template>
          </el-table-column>
          <el-table-column prop="reason" label="审核不通过原因" width="125"/>
          <el-table-column prop="address" label="操作" width="140">
            <template #default="n">
              <el-button style="align-items: center" v-if="n.row.status===3||n.row.status===2" type="primary" @click="completeInfo(n.row)">
                <el-icon style="font-size: 16px">
                  <Edit/>
                </el-icon>&nbsp;信息补全
              </el-button>
              <el-button style="align-items: center" v-if="n.row.status===1" type="success" @click="onSuccess">
                <el-icon style="font-size: 16px">
                  <CircleCheck/>
                </el-icon>&nbsp;上架成功
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
      <span class="dialog-footer">
<!--        <el-button @click="addDialog = false">取消</el-button>-->
        <el-button type="success" @click="addDialog = false">完成</el-button>
      </span>
      </template>
    </el-dialog>
    <!--补全信息弹窗-->
    <el-dialog v-model="completeDialog" title="上架-补全商品信息">
      <div>
        <el-form
            ref="ruleFormRef"
            :model="inventory"
            label-width="120px"
            status-icon
        >
          <el-form-item label="商品名">
            {{ inventory.goodsName }}
          </el-form-item>
          <el-form-item label="商品类型">
            {{ inventory.goodsType }}
          </el-form-item>
          <el-form-item label="商品进价">
            {{ inventory.buyPrice }}元
          </el-form-item>
          <el-form-item label="销售价" prop="sellPrice" :rules="[
        { required: true, message: '必填项' },
        { type: 'number', message: '必须是数字，保留小数点后两位' },
      ]">
            <el-input id="sellPrice" type="text" v-model.number="inventory.sellPrice"/>
          </el-form-item>
<!--          <el-form-item label="图片上传" prop="delivery">-->
<!--            <div>-->
<!--              <img :src="'upload/productImg/add_20220926153423.jpg'" id="faceImg">-->
<!--              <input type="file" id="uploadButton" ref="faceFile" @change="fileChange">-->
<!--            </div>-->
<!--          </el-form-item>-->
          <el-upload :action="uploadUrl" limit="1" :on-success="handleSuccess">
            <el-button size="small" type="primary">上传图片</el-button>
            <img v-if="imgUrl" :src="imgUrl" style="width: 50px;height: 50px" class="my-image">
          </el-upload>
          <el-form-item label="文字描述" prop="info" :rules="[
        { required: true, message: '必填项' }]">
            <el-input id="info" v-model="inventory.info" type="textarea"/>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="completeDialog = false">取消</el-button>
        <el-button type="success" @click="addOnProduct">上架</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "Admin",
  data() {
    return {
      addDialog: false,
      completeDialog: false,
      type: "",
      name: "",
      inventoryList: [],
      inventory: {},
      //imgPath: "",
      imgUrl: '',
      uploadUrl: 'picture/file/uploadFileAbGoods',
      actionUrl: "/picture/face/",
    }
  },
  beforeRouteEnter() {
    window.document.body.style.margin = 0;
  },
  methods: {
    //文件修改时调用
    // handleChange(file, fileList) {
    //   // this.ebsFileList = fileList;
    //   // this.ebsErrorImport = '';
    //   if (fileList.length > 1) {
    //     fileList.splice(0, 1);
    //   }
    // },

    //文件上传成功后调用
    handleSuccess(response, file, fileList) {
      this.inventory.goodsPic = response;
      //this.updateForm.headPic = response;
      this.imgUrl = URL.createObjectURL(file.raw);
      console.log(file.raw)
    },
    readStatus(status) {
      if (status === 1) {
        return "已上架"
      } else if (status === 2) {
        return "已下架"
      } else {
        return "审核未通过"
      }
    },
    openAddDialog() {
      this.addDialog = true;
      this.findAll();
    },
    findAll() {
      axios.post("/api/goods/pullGoods").then(res => {
        console.log(res.data)
        this.inventoryList = res.data;
      })
    },
    onSuccess() {
      ElMessage({
        message: '商品已上架',
        type: 'success',
      })
    },
    completeInfo(row) {
      this.inventory = row;
      this.completeDialog = true;
    },
    fileChange() {
      var reader = new FileReader();//定义文件读取流对象
      reader.readAsDataURL(this.$refs.faceFile.files[0]);
      reader.onload = function (ev) {
        document.getElementById("faceImg").src = ev.target.result;
      }
    },
    async addOnProduct() {
      // let obj = new FormData();
      // obj.append("pic", this.$refs.faceFile.files[0]);
      // var config = {
      //   headers: {'Content-Type': 'multipart/form-data'}
      // };
      //let face = "";
      // await axios.post("/picture/file/uploadFileAbGoods", obj, config).then(resp => {
      //   face = resp.data;
      // });
      let parameter = new FormData();
      parameter.append("goodsId", this.inventory.goodsId);
      parameter.append("sellPrice", this.inventory.sellPrice);
      parameter.append("goodsDes", this.inventory.info);
      parameter.append("goodsPic", this.inventory.goodsPic);
      console.log(this.inventory.goodsId)
      console.log(this.inventory.sellPrice)
      console.log(this.inventory.info)
      await axios.post("/api/goods/saveEs", parameter).then(r => {
        if (r.data.code === 200) {
          this.completeDialog = false
          ElMessage.success("提交成功等待审核")
        }
      })
    }
  }

}
</script>

<style scoped>
#container {
  width: 100%;
  height: 1800px;
  margin: auto;
  font-family: 微軟正黑體;
  background-color: #f3f3f3;
}

/*头部内容*/
p {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 100px;
  background-color: rgb(255, 255, 255, .9);
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 50px;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

header > div:nth-of-type(1) {
  display: flex;
  width: 1050px;
  align-items: center;
  justify-content: space-between;
}

a {
  text-decoration: none;
}

header > div:nth-of-type(1) > div:nth-of-type(1) a {
  font-size: 28px;
  font-family: 微軟正黑體;
  color: #afafaf;
}

header > div:nth-of-type(1) > div:nth-of-type(1) span {
  color: #333333;
}

header > div:nth-of-type(1) > div:nth-of-type(2) {
  width: 320px;
  display: flex;
  justify-content: space-between;
}

header > div:nth-of-type(1) > div:nth-of-type(2) a {
  color: #5e5e5e;
  font-family: 微軟正黑體;
}

header > div > a {
  position: absolute;
  right: 100px;
  top: auto;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: black;
}

/*大图*/
#img {
  background-image: url("../img/孤勇者_1600x900.png");
  background-position: 0 -200px;
  background-repeat: no-repeat;
  width: 1518px;
  height: 700px;
  position: absolute;
  top: 350px;
  left: 50%;
  transform: translate(-50%, -50%);
}

#inImgDiv {
  width: 1200px;
  height: 400px;
  background-color: white;
  position: absolute;
  /*bottom: -270px;*/
  border-radius: 10px;
  box-shadow: #afafaf 0 0 5px 0;
  padding: 30px 50px 60px;
  box-sizing: border-box;
  margin-bottom: 26px;
  top: 820px;
  left: 50%;
  /*top: 50%;*/
  transform: translate(-50%, -50%);
}

#inImgDiv > div:nth-of-type(1) {
  height: 60px;
  text-align: left;
}

#inImgDiv > div:nth-of-type(1) > p:nth-of-type(1) {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
}

#inImgDiv > div:nth-of-type(1) > p:nth-of-type(1) > span {
  color: #3f3fde;
}

#inImgDiv > div:nth-of-type(1) > p:nth-of-type(2) {
  margin-top: 10px;
  font-size: 13px;
  color: #afafaf;
}

#inImgDiv > div:nth-of-type(2) {

}

#model {
  margin-top: 26px;
  display: flex;
  justify-content: space-between;
}

#model > div {
  width: 350px;
  height: 120px;
  border: 1px solid #d8d8d8;
  box-sizing: border-box;
  border-radius: 5px;
  padding: 26px;
  transition: .5s;
}

#model > div:hover {
  cursor: pointer;
  border-color: #3f3fde;
  color: #3f3fde;
  transition: .5s;
  box-shadow: #3f3fde 0 0 5px 0;
}

#model > div > p {
  font-size: 22px;
  margin: 0;
}

#model2 {
  margin-top: 16px;
}

#model2 > div {
  width: 350px;
  height: 120px;
  border: 1px solid #d8d8d8;
  box-sizing: border-box;
  border-radius: 5px;
  padding: 26px;
  transition: .5s;
}

#model2 > div:hover {
  cursor: pointer;
  border-color: #3f3fde;
  color: #3f3fde;
  transition: .5s;
  box-shadow: #3f3fde 0 0 5px 0;
}

#model2 > div > p {
  font-size: 22px;
  margin: 0;
}

/*招标模块*/
#bid {
  /*margin-top: 360px;*/
  text-align: center;
  position: absolute;
  top: 1250px;
  left: 50%;
  transform: translate(-50%, -50%);
}

#bid > p:nth-of-type(1) {
  font-size: 28px;
  margin: 0;
  font-weight: 700;
}

#bid > p:nth-of-type(1) > span {
  color: #3f3fde;
}

#bid > p:nth-of-type(2) {
  font-size: 20px;
  margin: 0;
  color: #afafaf;
}

#bid > div {
  width: 1200px;
  height: 165px;
  margin: 50px auto;
  display: flex;
  justify-content: space-evenly;
}

#bid > div > div {
  width: 500px;
  height: 165px;
  display: flex;
}

#bid > div > div > div:nth-of-type(1) {
  width: 215px;
  height: 165px;
}

#bid > div > div > div:nth-of-type(2) {
  width: 285px;
  height: 165px;
  text-align: left;
  padding-left: 20px;
  box-sizing: border-box;
  background-color: #f3f3f3;
}

#bid > div > div:nth-of-type(1) > div > p:nth-of-type(1) {
  font-size: 24px;
  margin: 0;
}

#bid > div > div:nth-of-type(2) > div > p:nth-of-type(1) {
  font-size: 24px;
  margin: 0;
}

#bid > div > div:nth-of-type(1) > div > p:nth-of-type(2) {
  font-size: 14px;
  margin: 22px 0 25px 0;
  color: #686f7a;
}

#bid > div > div:nth-of-type(2) > div > p:nth-of-type(2) {
  font-size: 14px;
  margin: 22px 0 25px 0;
  color: #686f7a;
}

#bid > div > div:nth-of-type(1) > div > p:nth-of-type(3) {
  font-size: 16px;
  color: #979895;
}

#bid > div > div:nth-of-type(2) > div > p:nth-of-type(3) {
  font-size: 16px;
  color: #979895;
}

#bid > div > div:nth-of-type(1) > div:nth-of-type(1) {
  background-image: url("../img/招标.webp");
  background-size: 215px 165px;
  transition: .5s;
}

#bid > div > div:nth-of-type(2) > div:nth-of-type(1) {
  background-image: url("../img/投标.webp");
  background-size: 215px 165px;
  transition: .5s;
}

#bid > div > div:hover {
  cursor: pointer;
  box-shadow: #333333 0 0 15px 0;
  transition: .5s;
}

.blueSpan {
  display: block;
  width: 105px;
  height: 2px;
  background-color: #1b87ff;
  margin-bottom: 35px;
}

footer {
  height: 200px;
  width: auto;
}

/*文件上传*/
#uploadButton {
  width: 178px;
  height: 178px;
  display: inline-block;
  border: 1px dashed gray;
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
}

#uploadButton:hover {
  cursor: pointer;
  border-color: #1b87ff;
}

#faceImg {
  width: 178px;
  height: 178px;
}
</style>